<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>发起问题</title>
    <!--<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">-->
    <!--<link type="text/css" rel="stylesheet" href="/public/css/index.css">-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <style type="text/css">
        ::-webkit-input-placeholder { /* WebKit browsers */
            color: rgb(211, 216, 223);
            font-size: 12px;
        }
        .wenda-header {
            position: relative;
            width: 100%;
            padding: 5px 0px;
            background-color: #ffffff;
        }
        .wenda-header > ul {
            overflow: hidden;
            list-style: none;
            margin: 5px 8px;
            border:0px;
        }
        .wenda-header > ul > li {
            float: left;
        }
        .wenda-header > ul > li:nth-child(1) {
            width: 80%;
        }
        .wenda-header > ul > li:nth-child(2) {
            width: 20%;
            text-align: right;
        }
        .wenda-header > ul > li > img {
            width: 230px;
        }
        .wenda-header > ul > li > a {
            display: inline-block;
            padding: 5px 10px;
            background-color: #56a4ff;
            color: #fff;
            text-decoration: none;
            font-size: 15px;
            margin-top:2px;
            border-radius: 5px;
        }
        *{
            margin:0;
            padding: 0;
        }
        ul{
            background-color: #fff;
            overflow: hidden;
            /*border:1px solid #dfdfdf;*/
            list-style-type: none;
        }
        .question-title>ul{
            overflow: hidden;
            height: 30px;
            width: 100%;
            text-align: center;
            margin-top: 10px;

        }
        .question-title>ul>li:nth-child(1){
            float: left;
            width: 15%;
        }
        .question-title>ul>li:nth-child(2){
            width: 70%;
            float: left;
            color: #656565;
            font-size: 17px;
            text-decoration: none;
        }
        .question-title>ul>li:nth-child(3){
            float: left;
            width: 15%;
        }
        .question-title>ul>li:nth-child(3)>a{
            color: #56a4ff;
            text-decoration: none;
        }
        .buttonSelect {
            position: relative;
            width: 100%;
            margin-bottom: 15px;
            height: 30px;
        }
        .buttonSelect > ul {
            overflow: hidden;
            list-style: none;
        }
        .buttonSelect>ul>li:nth-child(1){
            float: left;
            width:35%;;
            padding-left: 15%;
            padding-top: 15px;
        }
        .buttonSelect>ul>li:nth-child(3){
            float: left;
            width: 25%;
            padding-left: 15%;
            padding-top: 15px;
        }
        .buttonSelect>ul>li:nth-child(2){
            width: 1px;
            background-color: #dfdfdf;
            height:30px;
            float: left;
            margin-top: 8px;
        }
        .buttonSelect > ul > li {
            float: left;
            display: inline-block;
            color: rgb(152,152,152);
            font-size: 15px;
        }
        .majorSelect {
            position: relative;
            width: 100%;
            margin-bottom: 15px;
            height: 30px;
        }
        .majorSelect > ul {
            overflow: hidden;
            list-style: none;
        }
        .majorSelect>ul>li:nth-child(1){
            float: left;
            width:35%;;
            padding-left: 15%;
            padding-top: 15px;
        }
        .majorSelect>ul>li:nth-child(3){
            float: left;
            width: 25%;
            padding-left: 15%;
            padding-top: 15px;
        }
        .majorSelect>ul>li:nth-child(2){
            width: 1px;
            background-color: #dfdfdf;
            height:30px;
            float: left;
            margin-top: 8px;
        }
        .majorSelect > ul > li {
            float: left;
            display: inline-block;
            color: rgb(152,152,152);
            font-size: 15px;
        }
        .chooseSchool>div:first-child{
            width: 100%;
            height: 150px;
            list-style: none;
        }
        .chooseSchool>div:first-child>ul:first-child{
            color: #989898;
            margin: 10px 15px;
        }
        .chooseSchool>div:first-child>ul>li{
            background-color: #56a4ff;
            color:#ffffff;
            font-size: 14px;
            float: left;
            margin: 5px 15px;
            padding: 5px 10px;
            border-radius: 12px;
        }
        .chooseSchool>div:first-child>ul>li:first-child{
            margin-left: 15px;
        }
        .chooseSchool>div:first-child>ul:last-child{
            overflow: hidden;
        }
        .chooseMajor>div:first-child{
            width: 100%;
            height: 150px;
            list-style: none;
        }
        .chooseMajor{
            display: none;
        }
        .chooseMajor>div:first-child>ul:first-child{
            color: #989898;
            margin: 10px 15px;
        }
        .chooseMajor>div:first-child>ul>li{
            background-color: #56a4ff;
            color:#ffffff;
            font-size: 14px;
            float: left;
            margin: 5px 15px;
            padding: 5px 10px;
            border-radius: 12px;
        }
        .chooseMajor>div:first-child>ul>li:first-child{
            margin-left: 15px;
        }
        .chooseMajor>div:first-child>ul:last-child{
            overflow: hidden;
        }
        .area>ul{
            text-align: center;
            color: #656565;
            padding-top: 5px;

        }
        .majorKind1>ul{
            text-align: center;
            color: #656565;
            padding-top: 5px;
        }
        .majorKind2>ul{
            text-align: center;
            color: #656565;
            padding-top: 5px;
        }
        .majorList>li{
            background-color: #f2f6f8;
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom: 1px #dfdfdf solid;
            display: none;
        }
        .areaList>li{
            background-color: #f2f6f8;
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom: 1px #dfdfdf solid;
            display: none;
        }
    </style>
</head>

<body>
    <header class="wenda-header">
     <ul>
         <li><img src="../img/head.png"> </li>
         <li><a href="https://itunes.apple.com/cn/app/kao-yan-kao-yan-wen-da-zai/id1112555340?l=en&mt=8">下载</a></li>
     </ul>
    </header>
    <hr color="#dfdfdf">
    <div class="question-title">

      <ul>
          <li><a href="addQuestion.html"><img src="../img/back.png" width="12px" height="17px"></a></li>
          <li>添加标签</li>
          <li id="done">完成</a></li>
      </ul>
    </div>
    <hr color="#dfdfdf">
    </div>
    <div class="buttonSelect">
        <ul>
            <li id="addSchool">添加院校</li>
            <li></li>
            <li id="addMajor">添加专业</li>
        </ul>
    </div>
    <hr color="#f2f6f8" size="8px">
    <div class="chooseSchool">
        <div>
            <ul>已选择院校: (最多可选择三所)</ul>
            <ul id="schoolBox"></ul>
        </div>
        <hr color="#f2f6f8" size="8px">
        <div class="area"></div>
    </div>
    <div class="chooseMajor">
        <div>
            <ul>已选择专业: (最多可选择三个)</ul>
            <ul id="majorBox"></ul>
        </div>
        <hr color="#f2f6f8" size="8px">
        <div class="majorSelect">
            <ul>
                <li id="kind1">学术型专业</li>
                <li></li>
                <li id="kind2">专业学位硕士</li>
            </ul>
        </div>
        <hr color="#dfdfdf">
        <div class="majorKind1">

        </div>
        <div class="majorKind2"></div>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function(){

            window.uploadSchool = function (e) {
                if($('#schoolBox').children().length == 3){
                    return;
                }
                $('#schoolBox').append("<li>"+$(e).attr('data-name')+"</li>");
            };

        window.uploadMajor = function (e) {
            if($('#majorBox').children().length == 3){
                return;
            }
            $('#majorBox').append("<li>"+$(e).attr('data-name')+"</li>");
        };


           $.ajax({
               type:'GET',
               contentType: "application/json",
               url:'http://api.okaoyan.com:9292/api/v1/area',
               data:null,
               dataType:'json',
               success:function (data) {
                   for(var i=0;i<data.area.length;i++){

                       (function (index) {
                           var areaId = data.area[index].id;
                           $.ajax({
                               type:'GET',
                               contentType: "application/json",
                               url:'http://api.okaoyan.com:9292/api/v1/area/'+areaId+'/schools',
                               data:null,
                               dataType:'json',
                               success:function (dataSource) {
                                   $('.area').append('<ul class="areaList" id="areaList'+index+'"><p>'+data.area[index].name+'</p></ul>');
                                   for(var j=0;j<dataSource.schools.length;j++){
                                       $('#areaList'+index).append('<li data-name="'+dataSource.schools[j].name+'" onclick="uploadSchool(this)">'+dataSource.schools[j].name+'</li>');
                                   }
                                   $('#areaList'+index).children('p').eq(0).click(function(){
                                       if ($(this).next('li').css('display') == "none") {
                                           $(this).siblings('li').show();
                                       }else {
                                           $(this).siblings('li').hide();
                                       }
                                   });
                               }
                           })
                       })(i);
                   }
               }
           })

        $.ajax({
            type:'GET',
            contentType: "application/json",
            url:'http://api.okaoyan.com:9292/api/v1/school/college?type=2&page=1',
            data:null,
            dataType:'json',
            success:function (data) {
                for(var i=0;i<data.colleges.length;i++){

                    (function (index) {
                        var collegeId = data.colleges[index].id;
                        $.ajax({
                            type:'GET',
                            contentType: "application/json",
                            url:'http://api.okaoyan.com:9292/api/v1/school/college/'+collegeId+'/major',
                            data:null,
                            dataType:'json',
                            success:function (dataSource) {
                                $('.majorKind1').append('<ul class="majorList" id="majorList'+index+'"><p>'+data.colleges[index].name+'</p></ul>');
                                for(var j=0;j<dataSource.majors.length;j++){
                                    $('#majorList'+index).append('<li data-name="'+dataSource.majors[j].name+'" onclick="uploadMajor(this)">'+dataSource.majors[j].name+'</li>');
                                }
                                $('#majorList'+index).children('p').eq(0).click(function(){
                                    if ($(this).next('li').css('display') == "none") {
                                        $(this).siblings('li').show();
                                    }else {
                                        $(this).siblings('li').hide();
                                    }
                                });
                            }
                        })
                    })(i);
                }

            }
        })

        $.ajax({
            type:'GET',
            contentType: "application/json",
            url:'http://api.okaoyan.com:9292/api/v1/school/college?type=1&page=1',
            data:null,
            dataType:'json',
            success:function (data) {
                for(var i=0;i<data.colleges.length;i++){

                    (function (index) {
                        var collegeId = data.colleges[index].id;
                        $.ajax({
                            type:'GET',
                            contentType: "application/json",
                            url:'http://api.okaoyan.com:9292/api/v1/school/college/'+collegeId+'/major',
                            data:null,
                            dataType:'json',
                            success:function (dataSource) {
                                $('.majorKind2').append('<ul class="majorList" id="majorList'+index+'"><p>'+data.colleges[index].name+'</p></ul>');
                                for(var j=0;j<dataSource.majors.length;j++){
                                    $('#majorList'+index).append('<li data-name="'+dataSource.majors[j].name+'" onclick="uploadMajor(this)">'+dataSource.majors[j].name+'</li>');
                                }
                                $('#majorList'+index).children('p').eq(0).click(function(){
                                    if ($(this).next('li').css('display') == "none") {
                                        $(this).siblings('li').show();
                                    }else {
                                        $(this).siblings('li').hide();
                                    }
                                });
                            }
                        })
                    })(i);
                }

            }
        })


        $('#kind1').click(function () {
            $('.majorKind1').show();
            $('.majorKind2').hide();
        })
        $('#kind2').click(function () {
            $('.majorKind2').show();
            $('.majorKind1').hide();

        })


        $('#addSchool').click(function () {
            $('.chooseSchool').show();
            $('.chooseMajor').hide();
        })
        $('#addMajor').click(function () {
            $('.chooseMajor').show();
            $('.chooseSchool').hide();

        })

        var subSchollData = function () {
            alert('xxxx');
            return;
        }
        $('#done').click(function () {
            var schoolArr =new Array();
            for(var k=0;k<$('#schoolBox').children().length;k++){
                schoolArr.push($('#schoolBox').children().eq(k).text());
            }

            var majorArr =new Array();
            for(var k=0;k<$('#majorBox').children().length;k++){
                majorArr.push($('#majorBox').children().eq(k).text());
            }
            var title = window.localStorage.getItem('title');
            var description = window.localStorage.getItem('description')
            $.ajax({
                type:'POST',
                contentType: "application/json",
                url:'http://api.okaoyan.com:9292/api/v3/questions/new',
                data:{tag_schools:schoolArr,tag_majors:majorArr,title:title,description:description},
                dataType:'JSON',
                success:function (dataSource) {
                    console.log(dataSource);
                }
            })
        })
    });
</script>

</html>